<template>
  <VanButton class="base-circle-button" round @click="onBack" />
</template>

<script setup>
import { formatSize } from "@/utils/cssUtils";
import { computed } from "vue";
const props = defineProps({
  size: {
    default: "sm",
  },
});

const theSize = computed(() => {
  return formatSize(props.size, "circle-button");
});
</script>

<style lang="scss" scoped>
.base-circle-button {
  --dx-size-circle-button-xs: 28px;
  --dx-size-circle-button-sm: 32px;
  --dx-size-circle-button-md: 40px;
  --dx-size-circle-button-lg: 48px;

  width: v-bind(theSize);
  height: v-bind(theSize);
  color: var(--van-text-color);
  background: rgba(0, 0, 0, 0.4);
  border: none;
}
</style>
